<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
                backgroundColor: '#1b1b1b',
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}",
                    position: [0, 0],
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize: 10,
                    }
                },
                series: [
                    {
                        name: ' ',
                        type: 'gauge',
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        radius: '95%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 坐标轴小标记
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        axisTick: {            // 坐标轴小标记
                            length: 10,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {           // 分隔线
                            length: "10%",         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 3,
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {           // 分隔线
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5
                        },
                        title: {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail: {
                            backgroundColor: 'rgba(30,144,255,0.8)',
                            borderWidth: 1,
                            borderColor: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 5,
                            offsetCenter: [0, '50%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        },
                        data: [{ value: 0, name: ' ' }]
                    }
                ]
            };

        myChart.setOption(option);

        function setBaceGroundColor(color) {
            option.backgroundColor = color;
            myChart.setOption(option);
        }
        function setTooltipFormatter(format) {
            option.tooltip.formatter = format;
            myChart.setOption(option);
        }
        function setGaugeName(name) {
            option.series[0].name = name;
            myChart.setOption(option);
        }
        function setRange(min, max, split) {
            option.series[0].min = min;
            option.series[0].max = max;
            option.series[0].splitNumber = split;
            myChart.setOption(option);
        }
        function setAxaisLineColor(color) {
            option.series[0].axisLine.lineStyle.color = color;
            myChart.setOption(option);
        }
        function setFontSize(size) {
            option.series[0].title.textStyle.fontSize = size;
            option.series[0].detail.textStyle.fontSize = size;
            myChart.setOption(option);
        }
        function setDataName(name) {
            option.series[0].data[0].name = name;
            myChart.setOption(option);
        }
        function setDataValue(value) {
            option.series[0].data[0].value = value;
            myChart.setOption(option);
        }

        window.onresize = myChart.resize;
    </script>
</body>

</html>
